<template>
    <a-tabs @change="changeTab">
        <a-tab-pane :key="1" tab="基础信息">
            <a-descriptions bordered :column="2">
                <a-descriptions-item label="阿里云产品key">{{ device.aliProduct }}</a-descriptions-item>
                <a-descriptions-item label="阿里云设备密钥">{{ device.aliSecret }}</a-descriptions-item>
                <a-descriptions-item label="最近上线时间">{{ parseTime(device.onlineTime) }}</a-descriptions-item>
                <a-descriptions-item label="最近离线时间">{{ parseTime(device.offlinelineTime) }}</a-descriptions-item>
                <a-descriptions-item label="4G信号强度"></a-descriptions-item>
                <a-descriptions-item label="断电报警"></a-descriptions-item>
                <a-descriptions-item label="硬件版本号"></a-descriptions-item>
                <a-descriptions-item label="软件版本号"></a-descriptions-item>
                <a-descriptions-item label="物联网卡号" :span="2"></a-descriptions-item>
                <a-descriptions-item label="二维码" :span="2">
                    <a-image :width="100" :src="qr"/>
                    <!-- <a-qrcode :value="deviceQr" /> -->
                </a-descriptions-item>
            </a-descriptions>
        </a-tab-pane>
        <a-tab-pane :key="2" tab="端口">
            <BTable :columns="columns" :data="dataSource" :pagination="false">
                <template #status="{text}">{{ text == 1 ? '充电中' : '空闲' }}</template>
            </BTable>
        </a-tab-pane>
    </a-tabs>
    <div class="m-t-20">
        
    </div>
</template>
<script lang="ts" setup>
    import { parseTime } from '@/utils';
    import { getDeviceQrApi } from '@/api/system/PlatformData'
    import { computed, onMounted, ref } from 'vue';
    import { portApi } from '@/api/devices/Device';
    import { PORT_NAME } from '@/constant';

    import QRCode from 'qrcode'
    
    console.log(QRCode)

    const props = defineProps<{
            device:any
    }>()

    const dataSource = ref<any[]>([])
    const initedPort = ref(false)
    
    const qr = ref('')
    

    function changeTab(k) {
        if(k == 2 && !initedPort.value) {
            portApi(props.device.id).then(r => {
                const data = r.data
                const port:any = {}
                for(let i = 0; i < props.device.portCount; i ++) {
                    port.name = PORT_NAME[i + 1]
                    if(data) {
                        port.status = data.portStatus[i]
                        if(data.portData) {
                            port.power = data.portData[i][2]
                            port.current = data.portData[i][5]
                            port.voltage = data.portData[i][7]
                        }
                    }

                    dataSource.value.push(port)
                }
            })

            initedPort.value = true
        }
    }

    

    const columns = [
        {
            title: '端口',
            dataIndex: 'name',
        },
        {
            title: '状态',
            dataIndex: 'status',
        },
        {
            title: '功率(W)',
            dataIndex: 'power',
        },
        {
            title: '电流(A)',
            dataIndex: 'current',
        },
        {
            title: '电压(V)',
            dataIndex: 'voltage',
        },
    ]

    onMounted(() => {
        const device = String(props.device.id)

        getDeviceQrApi().then(res => {
            const size = 200
            var canvas = document.createElement('canvas');
            canvas.width = size
            canvas.height = size
            var ctx = canvas.getContext('2d');


            QRCode.toDataURL(res.data.replace('$1', device), function (err, url) {
                var qrImage = new Image();
                qrImage.src = url
                qrImage.onload = () => {
                    if(ctx == null) return
                    ctx.drawImage(qrImage, 0, 0, size, size)
                    ctx.font = '18px Arial';
                    ctx.fillStyle = 'black'; // 设置文本颜色
                    var textWidth = ctx.measureText(device).width; // 测量文本的宽度
                    ctx.fillText(device, size / 2 - textWidth / 2, size - 3); // Adjust position as needed

                    qr.value = canvas.toDataURL()
                }
            })


        })


        

        // Generate QR code using QRious
        // QRCode.toCanvas(canvas, 'sample text', function (error) {
            
        // })

        // Draw the QR code on the canvas
        // var qrImage = new Image();
        // qrImage.src = qr.toDataURL('image/png'); // Convert QR code to data URL
        // qrImage.onload = function () {
        // ctx.drawImage(qrImage, 50, 50); // Adjust position as needed

        // // Add text below the QR code
        // ctx.font = '16px Arial';
        // ctx.fillText('Additional text here', 50, 280); // Adjust position as needed
        // };
    })
    
</script>
